<script setup lang="ts">
import { computed, PropType } from "vue";
import calendarIcon from "@/assets/svg/calendar.svg?component";
import More2Fill from "@iconify-icons/ri/more-2-fill";
import { usePubAPI } from "../utils/hook";
import { serviceType } from "@/utils/commonType";
defineOptions({
  name: "ReCard"
});

const { onChangeAPILine, onDeleteAPI } = usePubAPI();


const props = defineProps({
  product: {
    type: Object as PropType<serviceType>
  }
});

const emit = defineEmits(["manage-product", "delete-item"]);

const handleClickAPIManage = (serviceInfo: serviceType) => {
  emit("manage-product", serviceInfo);
};
const handleClickAPIChangeLine = (serviceInfo: serviceType, status: boolean) => {
  onChangeAPILine(serviceInfo, status);
}
const handleClickDeleteAPI = (serviceId: serviceType) => {
  onDeleteAPI(serviceId);
}
const cardClass = computed(() => [
  "list-card-item",
  { "list-card-item__disabled": !(props.product.lineStatus === "on") }
]);

const cardLogoClass = computed(() => [
  "list-card-item_detail--logo",
  { "list-card-item_detail--logo__disabled": !(props.product.lineStatus === "on") }
]);
</script>

<template>
  <div :class="cardClass">
    <div class="list-card-item_detail bg-bg_color">
      <el-row justify="space-between">
        <div :class="cardLogoClass">
          <calendarIcon />
        </div>
        <div class="list-card-item_detail--operation">
          <el-tag :color="(product.lineStatus === 'on') ? '#00a870' : '#eee'" effect="dark"
            class="mx-1 list-card-item_detail--operation--tag">
            {{ (product.lineStatus === 'on') ? "在线" : "离线" }}
          </el-tag>
          <el-dropdown trigger="click">
            <IconifyIconOffline :icon="More2Fill" class="text-[24px]" aria-hidden="false" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleClickAPIManage(product)">
                  编辑
                </el-dropdown-item>
                <el-dropdown-item
                  @click="handleClickAPIChangeLine(product, product.lineStatus === 'on' ? false : true)">
                  <span v-if="product.lineStatus === 'on'">下线</span>
                  <span v-if="product.lineStatus === 'off'">上线</span>
                </el-dropdown-item>
                <el-dropdown-item @click="handleClickDeleteAPI(product)">
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-row>
      <p class="list-card-item_detail--title text-text_color_primary">
        <b>API名称：</b>{{ product.serviceName }}
      </p>
      <p class="list-card-item_detail--name text-text_color_regular">
        <b>发布应用：</b>{{ product.appName }}
      </p>
      <p class="list-card-item_detail--name text-text_color_regular">
        <b>API地址：</b>{{ product.serviceUrl }}
      </p>
      <p class="list-card-item_detail--name text-text_color_regular">
        <b>说明文档：</b>{{ product.serviceDocId }}
      </p>
      <p class="list-card-item_detail--desc text-text_color_regular">
        <b>API说明：</b>{{ product.serviceDesc }}
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-card-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;

  &_detail {
    flex: 1;
    min-height: 140px;
    padding: 24px 32px;

    &--logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      font-size: 26px;
      color: #0052d9;
      background: #e0ebff;
      border-radius: 50%;

      &__disabled {
        color: #a1c4ff;
      }
    }

    &--operation {
      display: flex;
      height: 100%;

      &--tag {
        border: 0;
      }
    }

    &--title {
      margin: 24px 0 8px;
      font-size: 16px;
      font-weight: 400;
      word-wrap: break-word; /* 当单词太长无法在一行内容纳时，自动将单词拆分成多行 */
      word-break: break-all; /* 允许在单词内换行 */
    }

    &--name {
      margin: 12px 0 8px;
      font-size: 12px;
      font-weight: 400;
      word-wrap: break-word; /* 当单词太长无法在一行内容纳时，自动将单词拆分成多行 */
      word-break: break-all; /* 允许在单词内换行 */
    }

    &--desc {
      display: -webkit-box;
      height: 40px;
      margin-bottom: 24px;
      overflow: hidden;
      font-size: 12px;
      line-height: 20px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-wrap: break-word; /* 当单词太长无法在一行内容纳时，自动将单词拆分成多行 */
      word-break: break-all; /* 允许在单词内换行 */
    }
  }

  &__disabled {

    .list-card-item_detail--name,
    .list-card-item_detail--desc {
      color: var(--el-text-color-disabled);
    }

    .list-card-item_detail--operation--tag {
      color: #bababa;
    }
  }
}
</style>
